.qf-nav-bar {
    width: 100%;
    margin:auto;
    height: 100px;
    background-color: #000;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28px;
}

.qf-button{position:relative;display:inline-block;box-sizing:border-box;height:44px;margin:0;padding:0;font-size:16px;line-height:1.2;text-align:center;border-radius:2px;cursor:pointer;-webkit-transition:opacity .2s;transition:opacity .2s;-webkit-appearance:none}.qf-button::before{position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:#000;border:inherit;border-color:#000;border-radius:inherit;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:0;content:' '}.qf-button:active::before{opacity:.1}.qf-button--disabled::before,.qf-button--loading::before{display:none}.qf-button--default{color:#323233;background-color:#fff;border:1px solid #ebedf0}.qf-button--primary{color:#fff;background-color:#07c160;border:1px solid #07c160}.qf-button--info{color:#fff;background-color:#1989fa;border:1px solid #1989fa}.qf-button--danger{color:#fff;background-color:#ee0a24;border:1px solid #ee0a24}.qf-button--warning{color:#fff;background-color:#ff976a;border:1px solid #ff976a}.qf-button--plain{background-color:#fff}.qf-button--plain.qf-button--primary{color:#07c160}.qf-button--plain.qf-button--info{color:#1989fa}.qf-button--plain.qf-button--danger{color:#ee0a24}.qf-button--plain.qf-button--warning{color:#ff976a}.qf-button--large{width:100%;height:50px}.qf-button--normal{padding:0 15px;font-size:14px}.qf-button--small{height:32px;padding:0 8px;font-size:12px}.qf-button__loading{color:inherit;font-size:inherit}.qf-button--mini{height:24px;padding:0 4px;font-size:10px}.qf-button--mini+.qf-button--mini{margin-left:4px}.qf-button--block{display:block;width:100%}.qf-button--disabled{cursor:not-allowed;opacity:.5}.qf-button--loading{cursor:default}.qf-button--round{border-radius:999px}.qf-button--square{border-radius:0}.qf-button__content{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;height:100%}.qf-button__content::before{content:' '}.qf-button__icon{font-size:1.2em;line-height:inherit}.qf-button__icon+.qf-button__text,.qf-button__loading+.qf-button__text,.qf-button__text+.qf-button__icon,.qf-button__text+.qf-button__loading{margin-left:4px}.qf-button--hairline{border-width:0}.qf-button--hairline::after{border-color:inherit;border-radius:4px}.qf-button--hairline.qf-button--round::after{border-radius:999px}.qf-button--hairline.qf-button--square::after{border-radius:0}


.qf-loading1{
    width: 80px;
    height: 40px;
    margin: 0 auto;
    margin-top:100px;
}
.qf-loading1 span{
    display: inline-block;
    width: 8px;
    height: 100%;
    border-radius: 4px;
    background: lightgreen;
    -webkit-animation: load 1s ease infinite;
    animation: load 1s ease infinite;  
}
@keyframes load{
    0%,100%{
        height: 40px;
        background: lightgreen;
    }
    50%{
        height: 70px;
        margin: -15px 0;
        background: lightblue;
    }

}
.qf-loading1 span:nth-child(2){
    -webkit-animation-delay:0.2s;
    animation-delay:0.2s;
   
}
.qf-loading1 span:nth-child(3){
    -webkit-animation-delay:0.4s;
    animation-delay:0.4s;
}
.qf-loading1 span:nth-child(4){
    -webkit-animation-delay:0.6s;
    animation-delay:0.6s;
}

.qf-loading1 span:nth-child(5){
    -webkit-animation-delay:0.8s;
    animation-delay:0.8s;
}

.qf-loading2 {
    position: fixed;
    left:0; 
    top:0;
    background-color: #000;
    opacity: .5;
    color: #fff;
    font-size:28px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}


/* dialog */
.qf-dialog {
    width: 100%;
    height: 100%;
    /* background-color: #000;
    opacity: .3; */
    background-color: rgba(0, 0, 0, .3);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
}

.qf-dialog .box {
    width: 500px;
    height: 300px;
    background-color: #fff;
}

.qf-dialog .box .header { 
    height: 50px;
    background-color: green;
    border-bottom: solid 2px black;
 }
 .qf-dialog .box .main { 
     height: 200px;
  }
 .qf-dialog .box .footer { 
     height: 50px;
     border-top: solid 2px black;
    text-align: right;
  }

/* page */
.qf-page span {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #000;
    color: #fff;
    font-weight: bold;
}

.qf-page span:hover { color:yellow; cursor: pointer; }